// 分类组件  
// 导入样式
// react的 函数式 的组件
import Cateone from './cateone.js'
import './index.css'
import {useNavigate,useLocation,useParams} from 'react-router-dom'
function Category(props){
	var navigate=useNavigate();
	var location=useLocation();
	// 获取navigate("/路径",{state:{属性：属性值}})
	console.log(location.state.sex)
		// 函数组件的数据
		const obj={
			name:"赵浩楠",
			age:20,
			aihao:"睡觉"
		}
		const arr=[{name:"西安",pro:"陕西"},{name:"天津",pro:"直辖市"},{name:"郑州",pro:"河南"}]
		// var liitems=arr.map(item=>{
		// 	return (<li>
		// 			<span>{item.name}</span>
		// 			<span>{item.pro}</span>
		// 	</li>)
		// })
		function say(){
				alert('点击事件触发了')
		}
		var str=``
		if(obj.age>18){
			str=<h1>{obj.age}</h1>
		}else{
			str=<h1>未成年</h1>
		}
		var val="你好"
		function valChange(e){
			console.log(e)
			val=e.target.value;//收集输入框的值
			console.log(val)
		}
		// 跳转到地址页
		function turnAddress(){
			// 跳转并传参
			navigate("/address/9572")
		}
		return (
				<div>
				   <button onClick={turnAddress}>去到地址页</button>	
				   <input  onInput={valChange} type="text" />
				   <h1>{val}</h1>
					<h1 className="title">我是分类组件</h1>
					// react绑定事件 
					<h1 onClick={say} id="myname">{obj.name}</h1>
					// react的条件渲染
					{str}
					 <h1>Hello!</h1>
					<ul>
					// react的循环渲染
						{arr.map((item,index)=>{
							return (
							// key={item.toString()} 循环生成的标签 要绑定key
								<li key={index}>
									{index}
									<span>{item.name}</span>
									<span>{item.pro}</span>
								</li>
							)
						})}
					</ul>
					
					{
						arr.map((item,index)=>{
							return <Cateone key={index} name={item.name} />
						})
					}
					<h1>{props.province}</h1>	
					<h1>{props.city}</h1>	
				</div>
		)	
}
export default Category